<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      document.getElementsByClassName
      <p>document.getElementsByTagName</p>
      <p id="content">document.getElementById</p>
    </div>
    <script type="text/javascript">
      // 可以传入父级元素，查找父级元素下的匹配属性
      // 默认的父级元素为document
      function $get(elemInfo, parent) {
        var _opt = elemInfo.slice(0, 1),
          elem = elemInfo.replace(_opt, '');
        parent = parent || document;
        switch (_opt) {
          // 通过className查找
          case '.':
            return parent.getElementsByClassName(elem);
          // 通过ID查找
          case '#':
            return document.getElementById(elem);
          // 默认通过
          default:
            return parent.getElementsByTagName(elemInfo);
        }
      }

      // HTMLCollection [div.box]
      console.log($get('.box'));
      // <p id="content">document.getElementById</p>
      console.log($get('#content'));
      // HTMLCollection [div.box]
      console.log($get('div'));
    </script>
  </body>
</html>
